<template>
  <div id="mainDiv">
    <h2 style="width: 200px; display: inline-block; float: left">我要报修:</h2>
    <el-button :plain="true" @click="historyButton" style="float: right; margin-top: 20px">我的报修记录</el-button>
    <el-form ref="form" :model="form" label-width="80px" style="display: inline-block">
      <el-form-item label="所属楼宇">
        <el-select v-model="form.buildingId" placeholder="请选择所属楼宇" style="width: 400px">
          <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="form.address" placeholder="请输入详细地址" style="width: 600px"></el-input>
      </el-form-item>
      <el-form-item label="维修时间">
        <el-date-picker
            v-model="form.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="form.tel" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 4, maxRows: 10}"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit" style="float: right">一键报修</el-button>
      </el-form-item>
    </el-form>

    <!--历史记录抽屉窗口-->
    <el-drawer
        title="我的报修记录"
        :visible.sync="table"
        direction="rtl"
        size="42%">
      <div v-show="showHistoryTable">
        <el-table :data="gridData">
          <el-table-column property="buildingId" label="所属楼宇" width="180" />
          <el-table-column property="address" label="详细地址" width="190" />
          <el-table-column property="desc" label="描述" width="190" show-tooltip-when-overflow />
          <el-table-column property="status" label="当前状态" width="100" >
            <template slot-scope="scope">
              <span v-text="formatStatus(scope.row.status)"></span>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <!-- 分页 -->
        <div class="pageCss">
          <div class="block my-pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[5, 10, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background>
            </el-pagination>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "stuRepair",
  data() {
    return {
      buildingList: [],
      table: false,
      pageNo: 1, //当前页数
      pageSize: 10, //显示条数
      total: 0, //总条数
      gridData: [],
      showHistoryTable: true,
      form: {
        buildingId: '',
        address: '',
        time: [],
        tel: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit() {
      this.$axios.post("/service/repair.do", this.form).then(resp => {
        this.$message({
          message: resp.data.message,
          type: 'success'
        });
      })
    },
    onMounted() {
      // 获取楼宇列表
      this.$axios.post("/building/getBuildingList.do").then(resp => {
        this.buildingList = resp.data.data;
      }, err => {
        console.log(err);
      })
    },
    //历史记录按钮
    historyButton() {
      this.table = true;
      this.historyList()
    },
    //加载历史记录列表
    historyList() {
      this.$axios.post("/service/getServiceHistory.do", { //加载历史列表信息
        id: this.$store.getters.getUser.userId,//当前用户的userId：this.$store.getters.getUser.userId
        tutorId: (this.pageNo - 1) * this.pageSize,//避免后端建立vo类之间赋值给user的tutorId
        adminId: this.pageSize
      }).then(resp => {
        this.total = resp.data.data.total;
        this.gridData = resp.data.data.list;
        // console.log(resp.data)
      }, err => {
        console.log(err)
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.historyList();
    },
    //当前页数
    handleCurrentChange(val) {
      this.pageNo = val;
      this.historyList();
    },
    formatStatus(val) {
      switch (val) {
        case 1: return "等待维修";
        case 2: return "维修完成";
      }
    }
  },
  created() {
    this.onMounted();
  }
}
</script>

<style scoped>
#mainDiv {
  width: 700px;
  margin: 0 auto;
}

.pageCss {
  margin-left: 40px;
}
</style>